<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>sql编辑器</title>
    <link href="../../component/pear/css/pear.css" rel="stylesheet">

    <style>
        .sys-config .layui-form-item {
            margin-bottom: 0px;
        }

        .sys-config .layui-form-pane .layui-form-label {
            padding: 8px 5px;
        }
    </style>
</head>
<body class="pear-container sys-config">
<form class="layui-form layui-form-pane" action="" name="frmMain">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    mysql 在线编辑器
                    <button style="float: right;margin-top: 10px;" type="submit"
                            class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                            lay-filter="save">
                        执行
                    </button>
                </div>

                <div class="layui-card-body layui-row layui-col-space10">
                    <pre id="codeEditor" class="ace_editor" style="min-height:85vh"><s:textarea class="ace_text-input"
                                                                                                cssStyle="width:97.5%;"/></pre>
                </div>
            </div>

        </div>
    </div>
</form>
<script src="../../config/apiUrl.js"></script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script type="text/javascript" src="../../component/ace/src-min/ace.js"></script>
<script type="text/javascript" src="../../component/ace/src-min/mode-sql.js"></script>
<script type="text/javascript" src="../../component/ace/src-min/ext-language_tools.js"></script>
<script>
    layui.use(['form', 'code', 'common', 'toast'], async function () {
        var form = layui.form;
        var common = layui.common;
        var toast = layui.toast;
        var editor = await initEditor();
    });

    //初始化代码编辑器
    async function initEditor() {
        var common = layui.common;
        var toast = layui.toast;
        // caption 显示的名称；value 插入的值；score 权重（数值越大，提示越靠前）；meta 描述
        let tipsData = [
            {meta: "用户表", caption: "sys_user", value: "sys_user", score: 100},
            {meta: "唯一标识", caption: "sys_user.id", value: "id", score: 100}
        ]

        let tipsCompleter = {
            getCompletions: (editor, session, pos, prefix, callback) => {
                callback(null, tipsData)
            }
        }

        //获取控件   id ：codeEditor
        editor = ace.edit("codeEditor");
        //设置风格和语言（更多风格和语言，请到github上相应目录查看）
        theme = "monokai";
        //theme = "terminal";
        //语言
        language = "mysql";
        editor.setTheme("ace/theme/" + theme);
        editor.session.setMode("ace/mode/" + language);
        //字体大小
        editor.setFontSize(15);
        //设置只读（true时只读，用于展示代码）
        editor.setReadOnly(false);
        //自动换行,设置为off关闭
        editor.setOption("wrap", "free");
        //启用提示菜单
        const langTools = ace.require("ace/ext/language_tools");
        langTools.addCompleter(tipsCompleter);
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        return editor;
    }
</script>
</body>
</html>